<template>
    <!--轮播-->
    <div class="swiper-container swiper-cont" :style="height"  >
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for=" img in picturesList">
                <img   class="elememt" :src="$store.state.appData.imgUrl+img.path" @tap="goPicturesList(img.newsId)"/>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination" ></div>
    </div>
</template>


<script>
    import { mapState } from 'vuex'
    import Swiper from 'static/js/swiper'
    import {getNew} from '@/nodeApi/carInfo'
    import storage from '@/utils/localstorage'
    import {getSlideshow} from '@/api/config'
    export default {
        data() {
        return {
            height:{
                
            },
            picturesList: []
        }
    },
    created() {
        if(this.appData.picturesList.length == 0){
            getSlideshow().then(res=>{
                //storage.setLocalstorage('picturesList',res.data.pictures)
                this.$store.commit('PicturesList',res.data.pictures)
                this.picturesList = res.data.pictures
            })
        }else{
            this.picturesList = this.appData.picturesList
        }
        ////console.log(this.$store.state.appData.picturesList)

        
        ////console.log(document.getElementsByClassName('elememt')[0].clientHeight)
    },
    mounted() {
        /*  this.$nextTick(()=>{
            let that = this
            new Swiper ('.swiper-cont', {
                loop : true,
                autoplay: {
                    disableOnInteraction: false,
                },
                delay: 4000,//4秒切换一次
                // 如果需要分页器
                pagination:{
                    el: '.swiper-pagination',
                    clickable: true,
                    //dynamicBullets: true
                },
                observer:true,
                observeParents:true  
            }) 
        }) */
        //mySwiper.updateSize();
        ////console.log(mySwiper.slides[0].style)
        ////console.log(document.getElementsByClassName('elememt')[0].clientHeight)
        //this.height = { height: document.getElementsByClassName('elememt')[0].clientHeight+'px'}        
    },
    //注意销毁掉监听，不然报错
    destroyed () {
    },
    components: {},
    methods: {
        goPicturesList(newsId){
            let data = {'newsId': newsId}
            getNew(data).then(res=>{
                console.log(data)
                this.$router.push({
                    name: "carInfoDetail",
                    params: {
                        news:res.data.news
                    }
                })
            })
        }
    },
    props:{
        /* picturesList: {
            type: Array
        } */
    },
    watch:{
        /* picturesList() {
            this.$nextTick(()=>{
                //console.log(document.getElementsByClassName('elememt')[0].height)
                this.height = { height: document.getElementsByClassName('elememt')[0].clientHeight+'px'}        
            })
        }, */
        picturesList:{ // 监视双向绑定的数组变化
            handler(){
                this.$nextTick(()=>{
                    let that = this
                    new Swiper ('.swiper-cont', {
                        loop : true,
                        autoplay: {
                            disableOnInteraction: false,
                        },
                        delay: 4000,//4秒切换一次
                        // 如果需要分页器
                        pagination:{
                            el: '.swiper-pagination',
                            clickable: true,
                            //dynamicBullets: true
                        },
                        observer:true,
                        observeParents:true,
                        on:{
                            imagesReady: function(){
                                try{
                                    that.height = { height: document.getElementsByClassName('elememt')[0].clientHeight+'px'}
                                }catch(e){
                                    console.log(e)
                                }
                            }
                        }
                    }) 
                })
            },
            deep: true//深度监视
        }
    },
    computed:{
      ...mapState([
          'appData',
      ])
    },
  }
</script>


<style scoped>
    @import '~static/css/swiper.css';
    .swiper-container{
    }
    .swiper-slide{
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        -o-transition-property: transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
    }
    .swiper-slide img{
        width:100%;
    }
</style>